<template>
  <div class="login-container">
    <video src="../../assets/404_images/video.3cf57b17.mp4" autoplay loop muted />
    <el-form ref="form" class="el-from" :model="loginForm" :rules="loginRules">
      <div class="title">
        <img src="../../assets/404_images/logo.png" alt="">
      </div>
      <el-form-item class="el-form-item" prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入用户名" style="width :360px" prefix-icon="el-icon-user-solid" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" placeholder="请输入密码" style="width :360px" prefix-icon="el-icon-unlock" show-password />
      </el-form-item>
      <el-form-item prop="verify">
        <el-input v-model="loginForm.verify" placeholder="验证码" style="width :360px" prefix-icon="el-icon-sort-down" />
        <img src="../../assets/404_images/code.png" alt="" class="add">
      </el-form-item>
      <el-form-item>
        <el-button type="danger" style="width :360px" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        verify: ''
      },
      loginRules: {
        username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 5, max: 12, message: '格式不正确', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度应该为6-16位之间', trigger: 'blur' }],
        verify: [{ required: true, message: '验证码不正确', trigger: 'blur' }]
      }

    }
  },
  methods: {
    login() {
      this.$refs.form.validate((isOK) => {
        if (isOK) {
          this.$message.success('登录成功')
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100%;
}
video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.el-form {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 10px;
  width: 450px;
  height: 525px;
  background-color: white;
  z-index: 999;
  overflow: hidden;
}
.title {
  width: 450px;
  height: 160px;
  // background-color: pink;
  img {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

  width: 200px;
  height: 60px;
}
}

.el-form-item {
  // text-align: center;
  margin-left: 45px;
  margin-bottom: 50px;
}
.add {
  position: absolute;
  top: 15%;
  left: 60%;
  width: 100px;
  height: 30px;
}

</style>
